<template>
  <div class="mine">

   <mt-header fixed class="mt_header">
      <div slot="left"><i class="iconfont icon-Work" style="width:.6rem;height: .6rem;font-size: .8rem;"></i></div>
      <div slot="right">
      </div>
    </mt-header>
           <!-- 用户资料条 -->
   <div class="nav_header">
     <div class="nav_info">
       <div class="nav_info_title">
         {{$t('account')}}：{{ param.username }}
       </div>
       <div class="nav_info_subtitle">
         {{$t('usable')}}：{{ param.money_ke }}
       </div>
     </div>
   </div>

    <!-- 主页面 -->
    <div class="main_page">
      <div class="slide_header">
        <img src='../../assets/bitcoin.png' style="width: 100%; height:100%;border-radius: 10px;">
      </div>

      <!-- 菜单列表 -->
      <div class="item_list">
        <div class="item" @click="realname">
          <div><i class="iconfont icon-Profile"></i></div>
          <div><span>{{$t('real_identity')}}</span></div>
        </div>
        <div class="item" @click="mingxi">
          <div><i class="iconfont icon-Work"></i></div>
          <div><span>{{$t('fund_detail')}}</span></div>
        </div>
        <div class="item" @click="gonggaolist">
          <div><i class="iconfont icon-Notification"></i></div>
          <div><span>{{$t('notification')}}</span></div>
        </div>
        <div class="item" @click="changepwd">
          <div><i class="iconfont icon-Password"></i></div>
          <div><span>{{$t('change_password')}}</span></div>
        </div>
        <div class="item" @click="money">
          <div><i class="iconfont icon-Ticket"></i></div>
          <div><span>{{$t('recharge_withdraw')}}</span></div>
        </div>
        <div class="item" @click="changeLanguage">
          <div><i class="iconfont icon-a-MoreSquare"></i></div>
          <div><span>{{$t('change_language')}}</span></div>
        </div>
        <div class="item" @click="on">
          <div><i class="iconfont icon-a-InfoSquare"></i></div>
          <div><span>{{$t('about')}}</span></div>
        </div>
        <div class="item" @click="logout">
          <div><i class="iconfont icon-Lock"></i></div>
          <div><span>{{$t('logout')}}</span></div>
        </div>
      </div>

    </div>

    <div class="commonFooter">
      <commonFooter active='mine'></commonFooter>
    </div>
  </div>
</template>
<script>
  import commonFooter from './footer';
	export default {
		data() {
			return {
				gonglist: [],
        param: {
          username: '',
          money_ke: 0
        },
			};
		},
    components: {
      commonFooter, //  底部导航
    },
    mounted() {

      this.getusermouny();
    },
    methods: {
      /* 获取用户资金状态*/
      getusermouny() {
        this.$get('addons/tf-futures/member/my-info').then(res => {
          if (res.code == 200) {
            this.param = res.data;
          } else {
            console.log(res.message || '获取用户资金状态出错 ');
          }
        });
      },
      // 实名
      realname() {
        this.$router.push({ path: 'realname' });
      },
      /* 通知公告*/
      gonggaolist() {
        this.$router.push({ path: 'gonggao' });
      },
      changepwd() {
        this.$router.push({ path: 'changepwd' });
      },
      money() {
        this.$router.push({ path: 'chongzhi' });
      },
      mingxi() {
        this.$router.push({ path: 'mingxi' });
      },
      optional() {
        this.$router.push({ path: 'optional' });
      },
      on() {
        this.$router.push({ path: 'on' });
      },
      profit() {
        this.$router.push({ path: 'profit' });
      },
      login() {
        this.$svcInvoke.setConf('_token', '');
        localStorage.removeItem('_token');
        this.$router.push({ path: '/' });
      },
      logout() {
        //退出登录
        this.$svcInvoke.setConf('_token', '');
        localStorage.removeItem('_token');
        this.$router.push({ path: '/' });
      },
      changeLanguage(){
        //切换语言
        console.log('changlanguage');
        var target = localStorage.getItem('locale') == 'zh' ? 'en' : 'zh';
        localStorage.setItem('locale',target)
        this.$i18n.locale = localStorage.getItem('locale')
        //重新选择主页面
        this.userlogin(this.$t('all'))
      },
      userlogin(itemname) {
        if (this.$svcInvoke.config._token) {
          return (this.selected = itemname);
        } else {
          if (localStorage.getItem('_token')) {
            this.$svcInvoke.setConf('_token', localStorage.getItem('_token'));
            return (this.selected = itemname);
          } else {
            return this.$router.push({ path: '/' });
          }
        }
      }
    }

  }

</script>
<style scoped="scoped">
.main_page {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  color: #fff;
  background: #242d36;
  box-sizing: border-box;
  padding-top: 1.5rem;
}
.slide_header {
  padding: 0 3% .3rem;
  height: 24%;
}
/* 头部文字 */
.mt_header {
  padding: 0 3%;
  background:#242D36;
  color:#fff;
  height: 2rem;
}
.nav_header {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 5vw;
  width: 65vw;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2rem;
  box-sizing: border-box;
}
.nav_header > div {
  padding: 0rem 1rem;
  font-size: 0.3rem;
  color: #ccd2dc;
}
.nav_info_title {
  font-size: .4rem;
  /* color: #008000; */
  font-weight:bold
}
.nav_info_subtitle {
  font-size: .35rem;
  color: #008000;
}
.nav_header .active {
  color: #fff;
  font-size: 0.4rem;
  font-weight: 600;
}
/* 列表 */
.item_list {
  width: 100vw;
  height: calc(68vh - 2rem);
  overflow-x: hidden;
  overflow-y: auto;
}
.item {
  height: 1.5rem;
  display: flex;
  align-items: center;
  padding: .1rem .8rem;
}
.item div {
   font-size: .35rem;
   margin: 20px 15px;
}
.item div i{
  width:.7rem;
  height: .7rem;
  font-size: .7rem;
}
</style>
